<template>
  <div class="listeningBooks">
    <div class="listeningBooks-header">
      <div class="listeningBooks-left">
        <h3 class="title">听书精选</h3>
        <ul class="catgory">
          <li
            v-for="(item, index) in listenList"
            :key="item.id"
            :class="{ active: defaultIndex === index }"
            @mouseenter="switchType(item.name, index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="listeningBooks-more">更多 ></div>
    </div>
    <div class="listeningBooks-content">
      <div class="listeningBooks-main">
        <ul class="books-ul">
          <li v-for="item in ListeningBooks" :key="item.id">
            <div class="books-left">
              <div class="img-wrapper">
                <img :src="item.picUrl" alt="" />
              </div>
              <div class="title_author">
                <div class="title">{{ item.name }}</div>
                <div class="author"></div>
              </div>
            </div>
            <div class="book-right">
              <img src="./images/book2.png" alt="" />
              <span>{{ item.playCount + "万" }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="listeningBooks-main"></div>
      <div class="listeningBooks-main"></div>
      <div class="listeningBooks-main"></div>
      <div class="listeningBooks-main"></div>
    </div>
  </div>
</template>

<script>
const listenList = [
  {
    id: 1,
    name: "热门",
  },
  {
    id: 2,
    name: "小说",
  },
  {
    id: 3,
    name: "儿童",
  },
  {
    id: 4,
    name: "相声",
  },
  {
    id: 5,
    name: "情感",
  },
];
import { reqListeningBooks } from "@/api";
export default {
  name: "ListeningBooks",
  mounted() {
    this.getListeningBooks(0);
  },
  data() {
    return {
      defaultIndex: 0,
      listenList,
      ListeningBooks: [],
      Books: [],
    };
  },
  methods: {
    switchType(name, index) {
      this.defaultIndex = index;
      this.getListeningBooks(index);
    },
    async getListeningBooks(index) {
      let res = await reqListeningBooks();
      if (res.code === 200) {
        var arr1 = [];
        var arr2 = [];
        res.result.forEach((item, index) => {
          if (index % 9 === 0) {
            arr1.push(arr2);
            arr2 = [];
          }
          // 默认往arr2中push  如果等于9时 往arr1中push
          arr2.push({
            id: item.id,
            name: item.name,
            picUrl: item.picUrl,
            playCount: Math.round(item.playCount / 10000),
          });
        });
      }
      arr1.push(arr2);
      arr1.shift();
      this.Books = arr1;
      this.ListeningBooks = this.Books[index];
    },
  },
};
</script>

<style lang="less" scoped>
.listeningBooks {
  width: 1000px;
  margin: 0 auto;
  height: 288px;
}

.listeningBooks-header {
  height: 50px;
  margin-top: 60px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.listeningBooks-header .listeningBooks-left {
  width: 532px;
  display: flex;
  align-items: center;
}

.listeningBooks-left h3 {
  font-size: 25px;
  font-weight: normal;
  color: #000000;
  cursor: default;
}

.catgory {
  height: 50px;
  margin-left: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.catgory li {
  margin-top: 3px;
  margin-right: 14px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 400;
  height: 24px;
  cursor: pointer;
  text-align: center;
  padding-top: 2px;
  box-sizing: border-box;
}

.catgory li.active {
  background-color: #e5f6ff;
  color: #00a9ff;
  border-radius: 15px;
  text-align: center;
}

.listeningBooks-header .listeningBooks-more {
  color: #858585;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
}

.listeningBooks-header .listeningBooks-more:hover {
  color: #0badff;
}

.listeningBooks-main ul {
  height: 218px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.listeningBooks-main ul li {
  width: 320px;
  height: 62px;
}

.books-ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  cursor: pointer;
}

.books-ul li:hover {
  background-color: #fafdff;
}

.books-ul li:hover .img-wrapper img {
  transform: scale(1.05);
}

.books-ul li:hover .title_author .title,
.books-ul li:hover .title_author .author,
.books-ul li:hover span {
  color: #00a9ff;
}

.books-left {
  display: flex;
  align-items: center;
}

.books-left .img-wrapper {
  width: 62px;
  height: 62px;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
}

.books-left .img-wrapper img {
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}

.title_author {
  margin-left: 14px;
}

.title_author .title {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  width: 160px;
  word-break: break-all;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.title_author .author {
  font-size: 12px;
  font-weight: 400;
  color: #949494;
  margin-top: 6px;
  word-break: break-all;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.book-right {
  width: 62px;
}

.book-right img {
  width: 12px;
  height: 12px;
}

.book-right span {
  font-size: 12px;
  color: #000000;
}
</style>
